<!--
    * Time    : 2021-01-10 15:45:08
    * Author  : zhangTj
    * Desc    : 保证金页面
-->

<template>
    <div class="w750">
        <div>
            <div>
                <div class="text-fff d-flex p-15p" style="background: #007fff">
                    <div class="rounded-circle overflow-h imgBox" style="width: 35px; height: 35px">
                        <img v-if="indexData.avatarUrl" :src="$imgUrlHead + indexData.avatarUrl" class="w-100 h-100" alt />
                        <img v-else src="../../assets/images/head-default.png" class="w-100 h-100" alt />
                    </div>
                    <div class="d-flex a-center ml">
                        <span class="font-20 line-clamp1" style="max-width: 200px; width: auto">{{ indexData.actualName }}</span>
                        <div class="font-12 font-12 rounded-10" style="margin-left: 7px; background: rgba(255, 255, 255, 0.2); padding: 1px 8px">
                            <svg width="50" height="12" style="fill: currentColor; color: #fff">
                                <text dominant-baseline="baseline" font-size="10" y="10.52" style="line-height: 1; vertical-align: middle">
                                    {{ indexData.serviceProvidersType == 'CITY_TYPE' ? '市级服务商' : '区级服务商' }}
                                </text>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="grid-column3 text-fff p-15p" style="background: linear-gradient(180deg, #1778ff 0%, #007fff 100%)">
                    <div class="d-flex flex-column">
                        <span class="font-16">{{ indexData.depositAmount | fotmatMoney }}</span>
                        <span class="mt-02 opacity-5 font-12">剩余金额</span>
                    </div>
                    <div class="d-flex flex-column">
                        <span class="font-16">{{ indexData.originalDepositAmount | fotmatMoney }}</span>
                        <span class="mt-02 opacity-5 font-12">保证金额</span>
                    </div>
                    <div class="d-flex flex-column">
                        <span class="font-16">{{ indexData.deductedDepositAmount | fotmatMoney }}</span>
                        <span class="mt-02 opacity-5 font-12">已抵扣金额</span>
                    </div>
                </div>
            </div>
            <div>
                <div class="position-sticky top-0" v-if="indexData.serviceProvidersType == 'CITY_TYPE'">
                    <van-tabs
                        v-model="activeTab"
                        @change="changeTag"
                        line-height="4px"
                        color="#007FFF"
                        title-active-color="#333"
                        title-inactive-color="#999"
                    >
                        <van-tab v-for="tab in tabList" :key="tab.type" :title="tab.name" />
                    </van-tabs>
                </div>
                <div class="font-14">
                    <van-list
                        v-if="paging.tab"
                        v-model="paging.loading"
                        :finished="paging.finished"
                        :immediate-check="false"
                        finished-text="没有更多了"
                        @load="loadMore"
                    >
                        <div class="mb-1 bg-fff px-15p" v-for="(item, index) in list" :key="item.id" :class="{ 'mt-1': index == 0 }">
                            <template v-if="activeTab == 0">
                                <div class="py-15p border-bottom border-c-f8 d-flex j-sb">
                                    <span>订单编号：{{ item.bizOrderNo }}</span>
                                    <span>{{ item.settleStatus | statusFormat }}</span>
                                </div>
                                <div class="py-15p">
                                    <div>
                                        <span>昵称：</span>
                                        <span>{{ item.nickName }}</span>
                                    </div>
                                    <div class="d-flex mt">
                                        <div class="flex-1">
                                            <span>付款金额：</span>
                                            <span>￥{{ money(item.amount)[0] }}.{{ money(item.amount)[1] }}</span>
                                        </div>
                                        <div class="flex-1" v-if="item.refundAmount">
                                            <span>售后退款：</span>
                                            <span style="color: #f56c6c">￥{{ money(item.refundAmount)[0] }}.{{ money(item.refundAmount)[1] }}</span>
                                        </div>
                                    </div>
                                    <div class="mt">
                                        <span>订单抵扣金额：</span>
                                        <span :style="{ color: item.changeType == 'ADD' ? '#67C23A' : '#f56c6c' }">
                                            {{ item.changeType == 'ADD' ? '+' : '-' }}￥{{ money(item.realAmount)[0] }}.{{
                                                money(item.realAmount)[1]
                                            }}
                                        </span>
                                    </div>
                                    <div class="mt">
                                        <span>完成时间：</span>
                                        <span>{{ item.createTime | dateformat }}</span>
                                    </div>
                                </div>
                            </template>
                            <template v-else>
                                <div class="py-15p border-bottom border-c-f8 d-flex j-sb">
                                    <span>{{ item.changeType == 'ADD' ? '退出' : '加入' }}区域：{{ item.nextServiceProvidersName }}</span>
                                    <span>{{ item.settleStatus | statusFormat }}</span>
                                </div>
                                <div class="py-15p">
                                    <div>
                                        <span>姓名：</span>
                                        <span>{{ item.nextServiceActualName }}</span>
                                    </div>
                                    <div class="mt">
                                        <span>抵扣金额：</span>
                                        <span :style="{ color: item.changeType == 'ADD' ? '#f56c6c' : '#67C23A' }">
                                            {{ item.changeType == 'ADD' ? '+' : '-' }}￥{{ money(item.amount)[0] }}.{{ money(item.amount)[1] }}
                                        </span>
                                    </div>
                                    <div class="mt">
                                        <span>加入时间：</span>
                                        <span>{{ item.createTime | dateformat }}</span>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </van-list>
                    <EmptyServe v-if="paging.emptylist || paging.error" title="暂无抵扣记录" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import EmptyServe from 'components/EmptyServe/EmptyServe'
import PageUtil from 'utils/PageUtil'
import cash from 'utils/tool'
import { providersDepositDetail, providersIndex } from 'api/facilitator'

const list = new PageUtil(providersDepositDetail)

export default {
    name: '',
    components: { EmptyServe },
    data() {
        return {
            activeTab: 0,
            tabList: [
                {
                    type: 'ORDER',
                    name: '区域订单额抵扣'
                },
                {
                    type: 'SERVICE',
                    name: '下级服务商抵扣'
                }
            ],
            paging: {
                tab: true,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            list: [],
            params: {
                type: 'ORDER' // ORDER:下单，SERVICE：服务商扣减
            },
            indexData: '', // 首页数据
            money: cash
        }
    },
    computed: {},
    watch: {},
    filters: {
        // 返回金额千分位
        fotmatMoney(value) {
            if (!value) {
                return value
            }
            return value.toLocaleString()
        },
        // 返回订单状态
        statusFormat(value) {
            const dict = {
                OFF_SETTLE: '未结算',
                ON_SETTLE: '已结算'
            }
            return dict[value] || ''
        }
    },
    created() {},
    destroyed() {},
    mounted() {
        this.getDetail()
        list.loadListByPage(this, this.params)
    },
    methods: {
        // 获取首页详情
        getDetail() {
            providersIndex()
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.indexData = res.result
                })
        },
        // 切换tab
        changeTag(tabIndex) {
            this.$set(this.params, 'type', this.tabList[tabIndex].type)
            list.loadListByPage(this, this.params)
        },

        // 加载更多
        loadMore() {
            list.loadListByPageMore()
        }
    }
}
</script>

<style scoped>
.imgBox {
    -webkit-transform: translate3d(0, 0, 0);
}
.bg-img {
    background: url('~@/assets/images/profit-img.png') no-repeat bottom, linear-gradient(180deg, #1778ff 0%, #007fff 100%);
    background-size: 100%;
}
</style>
